<template>
  <!-- 富文本控件 -->
  <div class="form-components">
    <div v-if="readonly" class="form-readonly"></div>
    <div v-if="disabled" class="form-disabled"></div>
    <RichEditor
      v-if="!loading"
      class="el-textarea"
      v-model="dataValue"
      :readonly="readonly || disabled"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :height="height"
      :transcoding="transcoding"
      @input="changeValue"
    />
  </div>
</template>
<script>
// 富文本
import RichEditor from "@/plugins/richEditor/richEditorPc";
export default {
  name: "form-rich-text",
  components: {
    RichEditor
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update"
  },
  props: {
    // 绑定的输入值
    value: {
      default: ""
    },

    // 是否只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 占位语
    placeholder: {
      type: String,
      default: "请输入"
    },
    // 最大输入长度
    maxlength: {
      type: String,
      default: "20000"
    },
    height: {
      type: [String, Number],
      default: ""
    },
    // 是否开启转码
    transcoding: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dataValue: this.value,
      loading: false
    };
  },
  computed: {
    // 需要监听变化的数据
    changeObj() {
      return {
        maxlength: this.maxlength,
        placeholder: this.placeholder,
        disabled: this.disabled,
        readonly: this.readonly
      };
    }
  },

  watch: {
    // 监听数据的变化
    value: {
      handler(nd, od) {
        if (nd !== this.dataValue) {
          this.dataValue = nd;
        }
      }
    },
    changeObj: {
      handler(nd, od) {
        if (JSON.stringify(nd) != JSON.stringify(od)) {
          this.loading = true;
          this.$nextTick(() => {
            this.loading = false;
          });
        }
      }
    }
  },
  methods: {
    // 数据变化就传递更新
    changeValue(val) {
      this.$emit("update", val);
    }
  }
};
</script>
